<template>
    <div class="wrap">
        <van-tabs v-model="active" title-active-color="#333" title-inactive-color="#999" >
            <div class="title flex align-center van-hairline--bottom">
                <img src="../assets/wgreen.png" width="12" height="14" alt="">
                <span style="margin-left: 10px;">项目名称：</span>
                <span>{{taskName}}</span>
            </div>
                <!-- 报价汇总表2 和概算总表1 -->
                <van-tab :title="templateId == 'baojia' ?'报价汇总单' :'概算总表'" name="1">
                    <van-list
                        v-model="tableLoading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        :immediate-check="false"
                    >
                        <div class="table">
                            <van-row class="thead item radius10">
                                <van-col :span="4" class="text-center">序号</van-col>
                                <van-col :span="13" :offset="1">名称</van-col>
                                <van-col :span="6">合计({{templateId == 'baojia' ? '元' :'万元'}})</van-col>
                            </van-row>
                            <van-row class="main-data1 item" v-for="(data,i) in tableTotalList" :key="i" @click="show(data)">
                                <van-col :span="4" class="text-center">{{data['序号']}}</van-col>
                                <van-col :span="13" :offset="1" class="van-ellipsis">{{data['名称']}}</van-col>
                                <van-col :span="6" class="van-ellipsis text-right">{{data['合计']}}</van-col>
                            </van-row>
                        </div>
                    </van-list>
                </van-tab>
                <!-- 概算表3和清单表4 -->
                <van-tab :title="templateId =='baojia' ?'清单表': '概算表' " name="2">
                    <van-list
                        v-model="listLoading"
                        :finished="listFinished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        :immediate-check="false"
                    >
                        <div class="table ">
                            <van-row class="thead item radius10">
                                <van-col :span="3" class="text-center van-ellipsis">序号</van-col>
                                <van-col :span="6" class="van-ellipsis" >名称</van-col>
                                <van-col :span="3" class="van-ellipsis">单位</van-col>
                                <van-col :span="4" class="van-ellipsis">工程量</van-col>
                                <van-col :span="4" class="van-ellipsis">单价</van-col>
                                <van-col :span="4" class="van-ellipsis">合计(元)</van-col>
                            </van-row>
                            <van-row class="main-data2 item" v-for="(data,i) in listItem" :key="i" @click="show(data)">
                                <van-col :span="3" class="text-center van-ellipsis">{{data['序号']}}</van-col>
                                <van-col :span="6" class="van-ellipsis">{{data['名称']}}</van-col>
                                <van-col :span="3" class="van-ellipsis">{{data['单位']}}</van-col>
                                <van-col :span="4" class="van-ellipsis text-right">{{data['工程量']}}</van-col>
                                <van-col :span="4" class="van-ellipsis text-right">{{data['单价']}}</van-col>
                                <van-col :span="4" class="van-ellipsis text-right">{{data['合计']}}</van-col>
                            </van-row>
                        <!-- <div class="scroll-x">
                            <div class="head first-line" style="display:block;">
                                <div class="first text-center">序号</div>
                                <div class="" style="width:200px">名称</div>
                                <div class="" style="width:100px">单位</div>
                                <div class="" style="width:100px">工程量</div>
                                <div class="" style="width:100px">单价</div>
                                <div class="last">合计(元)</div>
                            </div>
                            <van-list
                                v-model="listLoading"
                                :finished="finished"
                                finished-text="没有更多了"
                                @load="onLoad"
                            >
                                <div :class="['head', i % 2 == 1 ?'content-line':'']" style="display:block;" v-for="(data,i) in listItem" :key="i">
                                    <div class="first text-center">{{i + 1}}</div>
                                    <div class="van-ellipsis" style="width:200px">{{data.name}}</div>
                                    <div style="width:100px">{{data.unit}}</div>
                                    <div style="width:100px">{{data.task}}</div>
                                    <div style="width:100px">{{data.price}}</div>
                                    <div class="last">{{data.total}}</div>  
                                </div>
                            </van-list>
                        </div> -->
                        </div>
                    </van-list>
                </van-tab>
        </van-tabs>
        <van-popup v-model="isShow" position="bottom" :style="{ height: '40%' }">
            <div class="data_wrap">

                <div v-for="(data,i) in select_data" :key="i"><span>{{i}}：</span>{{data}}</div>
                <!-- <div><span>序号：</span>{{select_data['序号']}}</div> -->
                <!-- <div><span>合计：</span>{{select_data['合计']}}</div> -->
            </div>
        </van-popup>
    </div>
</template>

<script>
import { getTableData } from '../api/table'
import { getItem } from '../utils/session'
export default {
    data() {
        return {
            active: '1',
            taskName: "",
            tableTotalList: [],
            listItem: [],
            tableLoading: false,
            catfrom: 1,  //传递1就返回概算总表数据   传递2返回报价汇总表数据   传递3返回概算表数据   传递4返回清单表
            curpage: 1, // 汇总表用的page
            page: 1, // 清单表用的page
            pagesize: 20,
            templateId: "",
            finished: false,
            project_name: "",
            isShow: false,
            select_data: {},
            listLoading: false,
            listFinished: false
        }
    },
    watch: {
        active() {
            this.getData()
        }
    },
    methods: {
        show(data) {
            this.select_data = data
            this.isShow = true
        },
        onLoad() {
            if(this.active == '1') {
                if(this.tableLoading) {
                    this.getData()
                }
            }else {
                if(this.listLoading) {
                    this.getData()
                }
            }
        },
        getData() {
            let project = ''
            let page = ''
            if(this.templateId == 'baojia') {
                if(this.active == '1') {
                    project = this.project_name
                    page = this.curpage
                }else if(this.active == '2') {
                    project = '清单表'
                    page = this.page
                }
            }else {
                if(this.active == '1') {
                    project = this.project_name
                    page = this.curpage
                }else if(this.active == '2') {
                    project = '概算表'
                    page = this.page
                }
            }
            getTableData(this.databasename, page, this.pagesize, project).then(res=>{
                if(this.active == '1') {
                    this.tableLoading = false
                    this.tableTotalList = this.tableTotalList.concat(res.data)
                    this.curpage = +(res.curpage) + 1
                }else {
                    this.listLoading = false
                    this.listItem = this.listItem.concat(res.data)
                    this.page = +(res.curpage) + 1
                }
                if(res.data.length < +(res.pagesize)) {
                    if(this.active == '1') {
                        this.finished = true
                    }else {
                        this.listFinished = true
                    }
                }
            }).catch(()=>{
                if(this.active == '1') {
                    this.tableLoading = false
                    this.finished = true
                }else {
                    this.listLoading = false
                    this.listFinished = true
                }
            })
        }
    },
    mounted() {
        this.databasename = this.$route.params.databasename || getItem('databasename')
        this.taskName = this.$route.params.name || getItem('taskname')
        this.templateId = this.$route.params.cate || getItem('cate')   // 如果是 baojia  进入 报价汇总  如果是 gaisuan 进入概算
        this.tableLoading = false
        this.listLoading = false
        this.project_name = this.$route.params.project_name || getItem('project_name')
        this.getData()
    }
}
</script>

<style scoped>
    .wrap {
       font-size: 14px;
    }
    .wrap .van-tab {
        font-size: 16px;
    }
    .title {
        padding: 0 15px 10px;
        box-sizing: border-box;
        margin-top: 10px;
    }
    .text-right {
        text-align: right;
    }
    .text-center {
        text-align: center;
    }
    .table {
        padding: 15px 15px 0;
        box-sizing: border-box;
    }
    .scroll-x {
        overflow-x: scroll;
    }
    .radius10 {
        border-radius: 10px;
    }
    .thead {
        background: rgba(39, 117, 229, 0.1);
    }
    .item {
        height: 34px;
        line-height: 34px;
    }
    .main-data2.item:nth-child(2n + 1) {
        background: rgba(51, 51, 51, 0.05);
        border-radius: 10px;
    }
    .main-data1.item:nth-child(2n + 1) {
        background: rgba(51, 51, 51, 0.05);
        border-radius: 10px;
    }
    .head {
        width: 200%;
    }
    .head div {
        height: 34px;
        line-height: 34px;
    }
    .scroll-x {
        overflow-x: scroll;
        white-space: nowrap;
    }
    .scroll-x div {
        display: inline-block;
        vertical-align: top;
    }
    .first,
    .last {
        width: 80px;
    }
    .first-line {
        background: rgba(39, 117, 229, 0.1);
        border-radius: 10px;
    }
    .content-line {
        background: rgba(51, 51, 51, 0.05);
        border-radius: 10px;
    }
    .data_wrap {
        padding: 20px;
        box-sizing: border-box;
    }
    .data_wrap span {
        display: inline-block;
        font-weight: 700;
        margin-right: 10px;
        line-height: 30px;
    }
</style>
